<template>
  <div class="app-container">
    <el-table
      ref="Table"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      height="100%"
      v-loading="loading"
    >
      <el-table-column label="看板展示区域" prop="taskBoardName">
      </el-table-column>
      <el-table-column label="关联工序" prop="workSectionName">
      </el-table-column>
      <el-table-column label="关联任务模板" prop="taskTemplateName">
      </el-table-column>
      <el-table-column label="展示内容" prop="title"> </el-table-column>
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="{ row }">
          <el-button type="text" @click="handleConfigClick(row)"
            >设置</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 配置 -->
    <ConfigDialog
      :visible.sync="configDialog.visible"
      :row="configDialog.row"
      @refresh="getList"
    ></ConfigDialog>
  </div>
</template>
<script>
import ConfigDialog from "./configDialog";
import { getKanbanConfigList } from "@/api/taskMgmt/kanbanConfig";
export default {
  name: "KanbanConfig",
  components: { ConfigDialog },
  data() {
    return {
      list: [],
      configDialog: {
        visible: false,
        row: null,
      },
      loading: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      getKanbanConfigList()
        .then((res) => {
          this.list = res?.data || [];
        })
        .catch(() => {
          this.list = [];
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleConfigClick(row) {
      this.configDialog.row = row;
      this.configDialog.visible = true;
    },
  },
};
</script>
